<template>
  <Dialog :show="showBlessingDialog">
    <div class="blessing_dialog_content">
      <div class="textarea">
        <p class="title">写上一句祝福吧</p>
        <textarea :value="blessing"
                  ref="blessing"
                  @input="handleInput"
                  placeholder="请写上一句祝福吧"></textarea>
        <div @click="changeBlessing"
             class="change_blessing flex align-center ">
          <img src="@/assets/img/upload_nexr.png"
               alt="切换">
          <span>换一句</span>
        </div>
      </div>
      <div @click="handleVote"
           class="btn">送出祝福</div>
      <div @click="handleMoreVotesDialogClose"
           class="close"></div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from "@/components/dialog/dialog"
export default {
  components: {
    Dialog
  },
  props: {
    showBlessingDialog: {
      type: Boolean,
      default: false
    },
    blessing: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleMoreVotesDialogClose() {
      this.$emit("close")
    },
    handleVote() {
      this.$emit("vote")
    },
    changeBlessing() {
      this.$emit("changeBlessing")
    },
    handleInput() {
      this.$emit('input', this.$refs.blessing.value)
    }
  }
}
</script>

<style lang="scss" >
.blessing_dialog_content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .textarea {
    position: relative;
    width: 528px;
    height: 434px;
    background-image: url("~@/assets/img/mask_content.png");
    background-size: cover;
    .title {
      font-size: 40px;
      font-family: AlibabaPuHuiTiM;
      color: #ffffff;
      line-height: 30px;
      text-align: center;
      padding-top: 38px;
    }
    padding: 0 30px;

    textarea {
      width: 469px;
      height: 94px;
      font-size: 28px;
      font-family: AlibabaPuHuiTiR;
      color: #333333;
      line-height: 47px;
      background-color: transparent;
      border: none;
      margin-top: 56px;
      &::-webkit-input-placeholder {
        color: #999999;
      }
      &::-ms-input-placeholder {
        color: #999999;
      }
      &::-moz-placeholder {
        color: #999999;
      }
    }

    .change_blessing {
      position: absolute;
      right: 45px;
      bottom: 96px;
      & > img {
        width: 28px;
        height: 28px;
        display: block;
        margin-right: 8px;
      }
      & > span {
        font-size: 24px;
        font-family: AlibabaPuHuiTiR;
        color: #999999;
        line-height: 24px;
      }
    }
  }
  .btn {
    width: 308px;
    height: 80px;
    background: linear-gradient(180deg, #ffad13 0%, #fd7508 100%);
    border-radius: 40px;
    font-size: 34px;
    font-family: AlibabaPuHuiTiM;
    color: #ffffff;
    line-height: 80px;
    text-align: center;
    margin: 0 auto;
    margin-top: 16px;
  }
  .close {
    width: 48px;
    height: 48px;
    background-image: url("~@/assets/img/mask_close.png");
    background-size: cover;
    margin: 0 auto;
    margin-top: 63px;
  }
}
</style>